<template>
  <div class="page page-login">
    <div class="box-wrapper">
      <div class="box-main-wrapper">
        <div class="box box-login">
          <h2>登录</h2>
          <el-form class="login-form" ref="form" :model="form" :rules="rules">
            <el-form-item prop="username">
              <div class="icon-wrapper user">
                <svg-icon icon-class="user"/>
              </div>
              <el-input
                v-model="form.username"
                autoComplete="on"
                placeholder="用户名"
              />
            </el-form-item>
            <el-form-item prop="password">
              <div class="icon-wrapper">
                <svg-icon icon-class="lock"/>
              </div>
              <el-input
                :type="passwordType"
                v-model="form.password"
                autoComplete="off"
                @keyup.enter.native="submitForm('form')"
                placeholder="密码"
              />
              <div
                class="icon-wrapper eyes last"
                @click="showPwd"
                :class="{ active: passwordType !== 'password' }"
              >
                <svg-icon icon-class="eye"/>
              </div>
            </el-form-item>
            <el-button
              class="btn-login"
              :loading="loading"
              type="primary"
              @click="submitForm('form')"
            >登录
            </el-button>
            <el-form-item prop="remember" class="row-remember-me">
              <el-checkbox class="pull-left" v-model="form.rememberMe"
              >记住密码
              </el-checkbox>
              <router-link class="pull-right" to="/find-password"
              >忘记密码
              </router-link>
            </el-form-item>
            <p class="tips no-padding">
              没有密码？请
              <router-link to="/register">注册</router-link>
            </p>
          </el-form>
        </div>
      </div>
    </div>
    <footer-simple/>
  </div>
</template>
<script>
import FooterSimple from "@/components/FooterSimple";

export default {
  name: "login",
  components: { FooterSimple },
  data() {
    return {
      passwordType: "password",
      loading: false,
      showDialog: false,
      form: {
        username: "",
        password: "",
        rememberMe: false
      },
      rules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: "请输入用户名" /*validator: validateUsername*/
          }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入密码" },
          { min: 6, trigger: "blur", message: "密码长度不小于6" },
          {
            pattern: /^(\w){6,20}$/,
            trigger: "blur",
            message: "只能输入6-20个字母、数字、下划线"
          }
        ],
        rememberMe: []
      }
    };
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "text";
      } else {
        this.passwordType = "password";
      }
      this.$logger('change password type');
      // this.$set(this.dynamicValidateForm,'domains ',res.data.domains)
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.form)
            .then(() => {
              this.loading = false;
              this.$router.push({ path: "/dashboard" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getInfo() {
      this.$store
        .dispatch("user/getUser", 123)
        .then((res) => {
          console.log(res);
        })
        .catch(() => {
        });
    }
  }
};
</script>
